<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-28 16:25:42
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-28 17:02:10
 * @Description: 
-->
<template>
  <div class="uploader">
    <el-upload
      class="avatar-uploader"
      :action="props.action"
      :headers="headers"
      :data="props.data"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="handleBeforeUpload"
    >
      <div v-if="url" @click.stop="handleRemove" class="cover">
        <el-icon class="avatar-uploader-icon"><Delete /></el-icon>
      </div>
      <img v-if="url" :src="url" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import { upload } from "@/api";

const props = defineProps({
  url: {
    type: String,
  },
  defaultImages: {
    type: String,
  },
  action: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
  },
});
const emit = defineEmits(["update:url"]);
const headers = { Authorization: `Bearer ${sessionStorage.token}` };

const url = ref(props.url);

// 上传图片校验
const handleBeforeUpload = (file) => {
  let reg = /^image\/(jpe?g|png)$/;
  const isImg = reg.test(file.type);
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isImg) {
    ElMessage.error("上传图片只能是 JPG / PNG 格式");
  }
  if (!isLt2M) {
    ElMessage.error("上传图片大小不能超过 2M");
  }
  return isImg && isLt2M;
};

// 上传成功
const handleUploadSuccess = (res, file) => {
  let { status, src } = res;
  url.value = src;
  ElMessage.success("上传成功");
  emit("update:url", url.value);
};

// 上传失败
const handleUploadError = ({ status, message }, file, fileList) => {
  let { msg } = JSON.parse(message);
  switch (status) {
    case 401:
      ElMessage.error("401,token失效，请重新登录");
      break;

    case 400:
      ElMessage.error(`400,${msg}`);
      break;

    default:
      ElMessage.error(`${status},${msg}`);
      break;
  }
};

// 删除现有图片
const handleRemove = async () => {
  if (url.value != props.defaultImages) {
    let res = await upload.remove({ src: url.value });
    console.log(res);

    if (res.status) {
      ElMessage.success("删除成功");
      url.value = "";
    }
  }
  emit("update:url", "");
  url.value = ""
};
</script>

<style lang='less' scoped>
.uploader {
  border: 1px dashed #d9d9d9;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  .avatar-uploader .el-upload {
    &:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 20px;
      color: #8c939d;
      width: 150px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }

    .cover {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.7);
      opacity: 0;
      transition: all 0.5s;

      .el-icon-delete {
        font-size: 18px;
        color: white;
      }
    }

    &:hover .cover {
      opacity: 1;
    }

    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }
  }
}
</style>
